<template>
    <div id="Message">
        <div class="header">
            <div class="ret" @click="goBack()"></div>
            <img src="../../assets/zfc-img/左箭头.png" alt="左箭头">
            <span>消息中心</span>
        </div>
        <div class="bg" v-for="(item,index) in arr " v-bind:key="index">
            <div class="bgTime">{{item.time}}</div>
            <div class="news">
                <div class="newsTxt">{{item.txt}}</div>
                <div class="conTent">
                    <img  :src="item.urlimg" alt="">
                    <span>{{item.text}}</span>
                </div>
                <div class="fooTer">
                    <span>{{item.name}}</span>
                    <img :src="item.urlimg1" alt="">
                </div>
            </div>
        </div>
        <div class="write"></div>
    </div>
</template>
<script>
export default {
    name:'Message',
    data() {
        return {
            arr:[
                {
                    time:"2017年06月20日10:44",
                    txt:'新品推荐',
                    urlimg:require("../../assets/img/新品推荐.png"),
                    text:"新品上市啦！时间不多了，赶紧行动起来吧！",
                    name:"查看更多",
                    urlimg1:require("../../assets/zfc-img/右箭头.png"),
                },
                 {
                    time:"2017年06月20日10:44",
                    txt:'安全提醒',
                    urlimg:require("../../assets/img/安全提醒.png"),
                    text:"近期有不法分子冒充阿拉灯客服进行诈骗，请认准阿拉灯官方客服电话4000123456",
                },
                 {
                    time:"2017年06月20日10:44",
                    txt:'收货啦',
                    urlimg:require("../../assets/img/收货了.png"),
                    text:"你的货物到站了，请注意查收哦~",
                },
            ]
        }
    },
    methods: {
         goBack() {
            window.history.back()
        },
    },
}
</script>
<style scoped>
  .header{
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      background-color: #e53e42;
      font-size: 0.36rem;
      color: #fff;
      position: relative;
  }
  .ret{
    width: 0.25rem;
    height: 0.4rem;
    position: absolute;
    left: 0.2rem;
    top: 0.35rem;
    z-index: 100;
}
  .header>img{
      width: 0.25rem;
    height: 0.4rem;
      position: absolute;
      left: 0.2rem;
      top: 0.3rem;
  }
  .header>span{
      margin-left: 3rem;
  }
  /* 消息中心内容 */
  .bg{
      width: 100%;
      height: 4.1rem;
      background-color: #f2f2f2;
      /* overflow: hidden; */
  }
  .bgTime{
      width: 100%;
      height: 0.9rem;
      font-size: 0.28rem;
      color: #ccc;
      text-align: center;
      line-height: 0.9rem;
  }
  .news{
      width: 6.6rem;
      height: 3.2rem;
      background-color: #fff;
      margin-left: 0.15rem;
      border: solid 1px #ccc;
  }
  .newsTxt{
      width: 6.6rem;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #4d4d4d;
      padding-left: 0.1rem;
  }
.conTent{
    width: 6.6rem;
    height: 1.4rem;
    display: flex;
    justify-content: space-evenly;
}
.conTent>img{
    width: 1.2rem;
    height: 1.4rem;
    border: solid 1px #ccc;
    margin-left: 0.1rem;
}
.conTent>span{
    width: 4.85rem;
    height: 0.4rem;
    font-size: 0.28rem;
}
.fooTer{
    width: 6.3rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: flex;
    justify-content: space-between;
    margin-left: 0.2rem;
    border-top: 1px solid #ccc;
    margin-top: 0.2rem;
}
.fooTer>span{
    display: block;
    width: 6.5rem;
    height: 0.8rem;
    font-size: 0.28rem;
}
.fooTer>img{
    height: 0.25rem;
    margin-top: 0.25rem;
}
.write{
    width: 100%;
    height: 2.6rem;
    background-color: #f2f2f2;
}
</style>